{% block sw_product_variants_delivery_media %}
<div class="sw-product-variants-delivery-media">
    {% block sw_product_variants_delivery_media_groups %}
    <div class="sw-product-variants-delivery-media__groups">
        <ul>
            <li
                v-for="group in selectedGroupsSorted"
                :key="group.id"
                class="sw-product-variants-delivery-media__groupElement"
                role="button"
                tabindex="0"
                :class="{'is--selected': activeGroup.id == group.id}"
                @click="activeGroup = group"
                @keydown.enter="activeGroup = group"
            >
                <mt-icon
                    name="regular-folder"
                    size="16px"
                />
                {{ group.translated.name }}
            </li>
        </ul>
    </div>
    {% endblock %}

    {% block sw_product_variants_delivery_media_media %}
    <div
        v-if="activeOptions.length"
        class="sw-product-variants-delivery-media__media"
    >
        {% block sw_product_variants_delivery_media_data_grid %}
        <sw-data-grid
            ref="variantsMedia"
            :data-source="activeOptions"
            :columns="optionColumns"
            :show-actions="false"
            :show-selection="false"
            :compact-mode="false"
            full-page
        >

            {% block sw_product_variants_delivery_media_data_grid_column_name %}
            <template
                #column-name="{ item, isInlineEdit, compact }"
            >
                {{ item.option.translated.name }}
            </template>
            {% endblock %}

            {% block sw_product_variants_delivery_media_data_grid_column_option_media %}
            <template #column-option.media="{ item, isInlineEdit, compact }">
                {% block sw_product_variants_delivery_media_data_grid_column_option_media_listener %}
                <sw-upload-listener
                    :upload-tag="item.id"
                    @media-upload-add="onUploadsAdded"
                    @media-upload-finish="successfulUpload"
                />
                {% endblock %}

                {% block sw_product_variants_delivery_media_data_grid_column_option_media_upload %}
                <sw-media-compact-upload-v2
                    :source="item.mediaId"
                    :upload-tag="item.id"
                    :default-folder="product.getEntityName()"
                    @media-upload-remove-image="removeMedia(item)"
                    @selection-change="setMedia"
                />
                {% endblock %}
            </template>
            {% endblock %}

        </sw-data-grid>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_product_variants_delivery_media_loader %}
    <sw-loader v-if="isLoading" />
    {% endblock %}

</div>
{% endblock %}
